<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!--
  1. 全局安装 vue脚手架
     npm install -g vue-cli  --- 2.9.6 (现在都不用了，用下面这个命令)
     npm install -g @vue/cli
  2. 查看 vue 版本
     vue -V      ---  @vue/cli 4.5.13
  3. 创建一个 vue 项目 (week2 > day01)
     vue create el-admin  --- (项目名称不能有大写字母)
  4. 路径切换到项目文件夹下： 
     cd el-admin
  5. 运行项目
     npm run serve 
     此时就可以在浏览器查看项目了
  6. 安装Element
     npm i element-ui -S
  7. 引入Element -- 完整引入
     项目入口文件 main.js 引入 element
     import ElementUI from 'element-ui';
     import 'element-ui/lib/theme-chalk/index.css';  
     Vue.use(ElementUI)
  8. 安装路由
     npm install vue-router --save-dev
  9. 引入路由 
      在src >router >index.js 中： 
      import VueRouter from 'vue-router'
      Vue.use(VueRouter)
      export default  router =  new VueRouter({
         routes: [
            {
             path: '/',
             name: 'login',
             component: () => import('@/views/login.vue')
            },
         ]
      })
  10. 改造首页面 App.vue:
      <template>
        <div id="app">
          <router-view/>
        </div>
      </template>
   11. 全局修改样式 App.vue:
      1) 添加通配符样式
      2) 自适应(rem,em,vw)
   12. 准备layout布局文件
      src > layout > index.vue:  组件库的<el-container>
         <el-header>是头部
         <el-aside>是侧边栏,一般会再结合<el-menu>来使用,用到 <router-link>实现路由跳转
         <el-main>是主页面,使用<router-view>渲染页面
      因为 每个页面都会有左侧菜单栏、Header、Footer,所以要写入路由中
   13. 准备页面,写好路由
      页面：
       src > views > common  index.vue
       src > views > test  index.vue
      路由：
       {
         path: '/test',
         component: Layout,
         children: [{
           path: '/',
           name: 'test',
           component: () => import('@/views/test/index'),
           meta: { title: '组合件计算', icon: 'el-icon-folder-opened', requiresAuth: true } // 路由的元信息：title: 在侧边栏和面包屑中展示的名字
         }]
       }
   24. 准备好页面和路由后，要和对应的侧边栏菜单对应起来(点击侧边栏菜单，跳转页面)
      1) <el-aside>中 
         <el-menu>
            <router-link>
               <el-menu-item>渲染路由 routes 的元信息meta中的icon和title</el-menu-item>
            </router-link>
         </el-menu>
      2) routes怎么拿到？
         computed: {
           routes () {
             return this.$router.options.routes
           }
         },
      3) 写好侧边栏的样式
   25. 在项目文件夹下创建一个 vue.config.js文件 
       这个文件中一般会添加跨域、取消ESlint规范检查.... 的配置
       vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写
         module.exports = {
             publicPath: './', // 打包时的基本路径
             outputDir: 'dist', // 输出文件目录
             lintOnSave: false, // 关闭ESlint检查
             devServer: { // 开发者服务器
               overlay: {
                 warnings: false, //不显示警告
                 errors: false	//不显示错误
               },
               // 设置服务器代理，解决开发环境下的跨域问题
               proxy: 'http://10.9.28.65:9090'
             },
         }
       !!!注意：修改这个文件后一定要重启项目
   26. 修改项目 favicon.ico 图标
       直接用新的图片替换掉原本的图标不生效?
         问题原因：项目使用了 @vue/cli-plugin-pwa插件https://www.npmjs.com/package/@vue/cli-plugin-pwa
         这个插件会更改网页标签图标的路径,所以导致我们的项目中多出来一个public/img/icons文件夹
         所以，我们需要在vue.config.js中更改pwa.iconPaths的路径，favicon.ico才能生效，配置如下：
          module.exports = {
              pwa: {
                iconPaths: {
                  favicon32: 'favicon.ico',
                  favicon16: 'favicon.ico',
                  appleTouchIcon: 'favicon.ico',
                  maskIcon: 'favicon.ico',
                  msTileImage: 'favicon.ico'
                }
              }
            }
         注意：修改了vue.config.js文件后，一定要重启项目！！！！！
              重启之后如果图标还是没有改变，清除一下浏览器缓存即可生效
      


         VUE后台管理系统项目：week7 > day05 > 03后台管理系统的创建


-->
</body>
</html>